<template>
    <div class="" id="basic">
       
        <el-row  style="margin-top:20px">
            <el-col :span="22" :offset="1">
                <div class="basic-content ">
                  <el-form :inline="true" ref="form" :model="formData" label-width="80px">
                   
                     <el-form-item label="字典代码">
                          <el-input v-model="formData.dict_type"></el-input>
                     </el-form-item>
                     <el-form-item label="字典名称">
                          <el-input v-model="formData.remark"></el-input>
                     </el-form-item>

                      <el-form-item >
                        <el-button v-preventReClick type="primary" @click="queryDict(formData)" style="margin-left:100px;">查询</el-button>
                      </el-form-item>
                  </el-form>
                 </div>
            </el-col>
            <el-col :span="22" :offset="1">
                <div class="permission-content bg-purple user-table">
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="text"
                      label="字典代码"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="remark"
                      label="字典名称"
                     >
                    </el-table-column>
                    
                   
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                          <el-button v-preventReClick @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                          <el-button  v-preventReClick @click="handleDelClick(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-col>
        </el-row>
        <el-dialog
          title="查看详情"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div class="permission-content bg-purple user-table">
            <el-row style="margin:0;">
              <el-col :span="2" :offset="20" style="margin-bottom:10px">
              <el-button v-preventReClick  @click="addRow(basicList)" type="primary"  size="small">新增</el-button>
              
              </el-col>
            </el-row>
                    <el-table
                    :data="basicList"
                    border
                     :key="Math.random()"
                     :highlight-current-row="true"
                     ref="basicMessageTable"
                    style="width: 100%">
                    <el-table-column
                      prop="dict_key"
                      label="字典代码"
                      >
                      <template slot-scope="scope">
                        <input style="width:100%;border:none" type="text" v-model="scope.row.dict_key" v-show="scope.row.iseditor" />
                        <span v-show="!scope.row.iseditor">{{scope.row.dict_key}}</span>
                      </template>
                      
                    </el-table-column>
                    <el-table-column
                      prop="dict_value"
                      label="描述"
                     >
                      <template slot-scope="scope">
                        <input style="width:100%;border:none" type="text" v-model="scope.row.dict_value" v-show="scope.row.iseditor" />
                        <span v-show="!scope.row.iseditor">{{scope.row.dict_value}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                          <div v-if="scope.row.iseditor">
                            <el-button v-preventReClick  @click="saveRow(scope.$index,scope.row)" type="text" size="small">保存</el-button>
                            <el-button v-preventReClick @click="editCancel(scope.$index,scope.row)" type="text" size="small">取消</el-button>
                          </div>
                           <div v-else>
                            <el-button v-preventReClick  @click="editRow(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                          <el-button v-preventReClick @click="listDel(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                          </div>
                        </template>
                    </el-table-column>
                  </el-table>
                </div>
        </el-dialog>
    </div>
</template>
<script>
import { insertDict,editDict } from '@/api/basic'
export default {
    data() {
      return{
          data:this.$store.state.basic,
          formData:{},
          tableData:[],
          basicList:[],
          editForm:[],
          addForm:[],
          showBasicStr:'',
          showBasicRemark:'',
          visible:false,
          addflag:false,
          dialogVisible:false
      }  
    },
    created(){
      //解决页面刷新vuex数据丢失的问题,不过也可以通过重新获取接口初始化basic
    //   window.addEventListener("beforeunload", () => {
    //       localStorage.setItem("stateInfo", JSON.stringify(this.$store.state));
    // });
    // if (localStorage.getItem("stateInfo")) {
    //       this.$store.replaceState(
    //         Object.assign(
    //           {},
    //           this.$store.state,
    //           JSON.parse(localStorage.getItem("stateInfo"))
    //     )
    //   );
    // }
    this.queryDict()
    },
    mounted(){
    },
    methods:{
      
      addRow(data){
        console.log(data)
        this.addflag=true
        let newBasic={id:data.length+1,dict_type:this.showBasicStr,remark:this.showBasicRemark,dict_key:'',dict_value:'',iseditor:true}
        data.push(newBasic)
      },
      editCancel(index,row){
            row=this.editForm
            this.$set(this.$refs.basicMessageTable.tableData,index,row);
      },
    
      queryDict(data){
        this.$store.dispatch('basic/getDict',data).then(res=>{
          console.log(this.$store.state.basic.dicts)
        this.data=this.$store.state.basic.dicts
        this.tableData=this.data

        })
       
      },
      
      //编辑具体字典
      editRow(index,row){
            this.editForm=JSON.parse(JSON.stringify(row))
            row.iseditor = true
            this.editForm.iseditor=false
            console.log(row)
            this.$set(this.$refs.basicMessageTable.tableData,index,row);
      },
      saveRow(index,row){
            console.log(index,row)
          if(this.addflag){
            insertDict(row).then(res=>{
            console.log(res)
              this.$message({
              message: '新增成功',
              type: 'success'
            });
          })
          }else{
            this.$store.dispatch('basic/editDict',row).then(res=>{
            console.log(res)
              this.$message({
              message: '编辑成功',
              type: 'success'
            });
          })
          }
          
            this.addflag=false
            row.iseditor = false
            this.$set(this.$refs.basicMessageTable.tableData,index,row);
      
      },
      //删除具体字典
      listDel(index,row){
        this.$store.dispatch('basic/delDict',{data:row}).then(res=>{
           this.$message({
              message: '删除成功',
              type: 'success'
            });
        this.data=this.$store.state.basic.dicts
      this.basicList.splice(index,1)
        this.queryDict()
        })
        
       
      },
      
      //查看详情
      handleClick(str){
        this.showBasicStr=str.text
        this.showBasicRemark=str.remark
        this.basicList=str.value
        console.log(this.basicList)
        this.dialogVisible=true
      },
      //关闭弹出框
      handleClose(){
        this.dialogVisible = false
      }
      
    }
}
</script>
<style lang='scss' scoped>
#facility{
    padding: 20px 0;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    // background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .permission-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>